<template>
  <div class="boxs">
    <div class="f2">
      <ul class="ul">
        <li>
          <el-form
            class="convention"
            ref="ruleForm1"
            :model="form"
            label-width="1.4583rem"
            :rules="rules"
          >
            <el-form-item label="纳税信用等级" prop="a" key="cut1">
              <el-select @change="a" v-model="form.a">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="A" value="A"></el-option>
                <el-option key="2" label="B" value="B"></el-option>
                <el-option key="3" label="C" value="C"></el-option>
                <el-option key="4" label="D" value="D"></el-option>
                <el-option key="5" label="M" value="M"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form
            class="convention"
            ref="ruleForm2"
            :model="form"
            label-width="1.4583rem"
            :rules="rules"
          >
            <el-form-item label="近12个月应税收入" prop="b" key="cut2">
              <el-input
                v-model="addform.b"
                @focus="
                  () => {
                    this.addform.b = remoney(this.addform.b)
                  }
                "
                @input="limitInput($event, 'b')"
                @blur="b"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form
            class="convention"
            ref="ruleForm3"
            :model="form"
            label-width="1.4583rem"
            :rules="rules"
          >
            <el-form-item label="近12个月应纳税额" prop="c" key="cut3">
              <el-input
                v-model="addform.c"
                @focus="
                  () => {
                    this.addform.c = remoney(this.addform.c)
                  }
                "
                @input="limitInput($event, 'c')"
                @blur="c"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
            </el-form-item>
          </el-form>
          <el-form
            class="convention"
            ref="ruleForm4"
            :model="form"
            label-width="1.4583rem"
            :rules="rules"
          >
            <el-form-item label="近12个月开票金额" prop="d" key="cut4">
              <el-input
                v-model="addform.d"
                @focus="
                  () => {
                    this.addform.d = remoney(this.addform.d)
                  }
                "
                @input="limitInput($event, 'd')"
                @blur="d"
              ></el-input>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form
            class="popover convention"
            ref="ruleForm5"
            :model="form"
            label-width="1.4583rem"
            :rules="rules"
          >
            <el-form-item label="近24个月是否存在逾期" prop="l" key="cut5">
              <el-select @change="e" v-model="form.e">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="否" value="否"></el-option>
                <el-option key="3" label="企业存在" value="企业存在"></el-option>
                <el-option key="2" label="法定代表人存在" value="法定代表人存在"></el-option>
                <el-option
                  key="4"
                  label="法定代表人及企业存在"
                  value="法定代表人及企业存在"
                ></el-option>
              </el-select>
              <el-popover
                style="position: absolute; left: -0.1563rem"
                placement="top-start"
                trigger="hover"
                content="企业及法定代表人征信逾期情况"
              >
                <img
                  style="width: 0.0938rem; height: 0.0938rem"
                  slot="reference"
                  src="@/assets/icon/$q.svg"
                  alt=""
                />
              </el-popover>
            </el-form-item>
          </el-form>
          <el-form
            class="popover convention"
            ref="ruleForm6"
            :model="form"
            label-width="1.4583rem"
            :rules="rules"
          >
            <el-form-item label="当前逾期金额" prop="f" key="cut6">
              <el-input
                v-model="addform.f"
                @focus="
                  () => {
                    this.addform.f = remoney(this.addform.f)
                  }
                "
                @input="limitInput($event, 'f')"
                @blur="f"
              ></el-input>
              <el-popover
                style="position: absolute; left: -0.1563rem"
                placement="top-start"
                trigger="hover"
                content="企业及法定代表人征信中当前逾期未还情况"
              >
                <img
                  style="width: 0.0938rem; height: 0.0938rem"
                  slot="reference"
                  src="@/assets/icon/$q.svg"
                  alt=""
                />
              </el-popover>
              <p style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 16px">
                元
              </p>
            </el-form-item>
          </el-form>
        </li>
        <!-- 企业存在 -->
        <div class="special" v-show="form.e == '企业存在' || form.e == '法定代表人及企业存在'">
          <h6>企业近24个月逾期情况</h6>
          <div class="special_div">
            <el-form
              class="specials"
              ref="ruleForm8"
              :model="form"
              label-width="0.9375rem"
              :rules="rules"
            >
              <el-form-item label="近6个月逾期次数" prop="h" key="cut8">
                <el-input v-model="form.h" @blur="h"></el-input>
                <p
                  style="
                    position: absolute;
                    right: 15px;
                    top: 0px;
                    z-index: 99;
                    font-size: 0.0833rem;
                  "
                >
                  次
                </p>
              </el-form-item>
            </el-form>
            <el-form
              class="specials"
              ref="ruleForm9"
              :model="form"
              label-width="0.9375rem"
              :rules="rules"
            >
              <el-form-item label="近12个月逾期次数" prop="i" key="cut9">
                <el-input v-model="form.i" @blur="i"></el-input>
                <p
                  style="
                    position: absolute;
                    right: 15px;
                    top: 0px;
                    z-index: 99;
                    font-size: 0.0833rem;
                  "
                >
                  次
                </p>
              </el-form-item>
            </el-form>
            <el-form
              class="specials popover"
              ref="ruleForm7"
              :model="form"
              label-width="1.3024rem"
              :rules="rules"
            >
              <el-form-item label="近24个月是否存在连3累6" prop="g" key="cut7">
                <el-select @change="g" v-model="form.g">
                  <el-option key="99" label="请选择" value=""></el-option>
                  <el-option key="1" label="是" value="是"></el-option>
                  <el-option key="2" label="否" value="否"></el-option>
                </el-select>
                <el-popover
                  style="position: absolute; left: -0.1563rem"
                  placement="top-start"
                  trigger="hover"
                  content="连3累6指最高连续逾期次数超过3次及以上，或累计逾期次数超过6次及以上"
                >
                  <img
                    style="width: 0.0938rem; height: 0.0938rem"
                    slot="reference"
                    src="@/assets/icon/$q.svg"
                    alt=""
                  />
                </el-popover>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 法定代表人存在 -->
        <div
          class="special"
          v-show="form.e == '法定代表人存在' || form.e == '法定代表人及企业存在'"
        >
          <h6>法定代表人近24个月逾期情况</h6>
          <div class="special_div">
            <el-form
              class="specials"
              ref="ruleForm11"
              :model="form"
              label-width="0.9375rem"
              :rules="rules"
            >
              <el-form-item label="近6个月逾期次数" prop="k" key="cut11">
                <el-input v-model="form.k" @blur="k"></el-input>
                <p
                  style="
                    position: absolute;
                    right: 15px;
                    top: 0px;
                    z-index: 99;
                    font-size: 0.0833rem;
                  "
                >
                  次
                </p>
              </el-form-item>
            </el-form>
            <el-form
              class="specials"
              ref="ruleForm12"
              :model="form"
              label-width="0.9375rem"
              :rules="rules"
            >
              <el-form-item label="近12个月逾期次数" prop="l" key="cut12">
                <el-input v-model="form.l" @blur="l"></el-input>
                <p
                  style="
                    position: absolute;
                    right: 15px;
                    top: 0px;
                    z-index: 99;
                    font-size: 0.0833rem;
                  "
                >
                  次
                </p>
              </el-form-item>
            </el-form>
            <el-form
              class="specials popover"
              ref="ruleForm10"
              :model="form"
              label-width="1.3024rem"
              :rules="rules"
            >
              <el-form-item label="近24个月是否存在连3累6" prop="j" key="cut10">
                <el-select @change="j" v-model="form.j">
                  <el-option key="99" label="请选择" value=""></el-option>
                  <el-option key="1" label="是" value="是"></el-option>
                  <el-option key="2" label="否" value="否"></el-option>
                </el-select>
                <el-popover
                  style="position: absolute; left: -0.1563rem"
                  placement="top-start"
                  trigger="hover"
                  content="连3累6指最高连续逾期次数超过3次及以上，或累计逾期次数超过6次及以上"
                >
                  <img
                    style="width: 0.0938rem; height: 0.0938rem"
                    slot="reference"
                    src="@/assets/icon/$q.svg"
                    alt=""
                  />
                </el-popover>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <li>
          <el-form
            class="popover convention"
            ref="ruleForm13"
            :model="form"
            label-width="1.4583rem"
            :rules="rules"
          >
            <el-form-item label="是否存在五级分类异常" prop="m" key="cut13">
              <el-select @change="m" v-model="form.m">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="是" value="是"></el-option>
                <el-option key="2" label="否" value="否"></el-option>
              </el-select>
              <el-popover
                style="position: absolute; left: -0.1563rem"
                placement="top-start"
                trigger="hover"
                content="连3累6指最高连续逾期次数超过3次及以上，或累计逾期次数超过6次及以上"
              >
                <img
                  style="width: 0.0938rem; height: 0.0938rem"
                  slot="reference"
                  src="@/assets/icon/$q.svg"
                  alt=""
                />
              </el-popover>
            </el-form-item>
          </el-form>
          <el-form
            class="convention"
            ref="ruleForm14"
            :model="form"
            label-width="1.4583rem"
            :rules="rules"
          >
            <el-form-item label="近3个月贷款审批征信查询次数" prop="n" key="cut14">
              <el-input v-model="form.n" @blur="n"></el-input>
              <p
                style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 0.0833rem"
              >
                次
              </p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form
            class="convention"
            ref="ruleForm15"
            :model="form"
            label-width="1.4583rem"
            :rules="rules"
          >
            <el-form-item label="近1个月贷款审批征信查询次数" prop="o" key="cut15">
              <el-input v-model="form.o" @blur="o"></el-input>
              <p
                style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 0.0833rem"
              >
                次
              </p>
            </el-form-item>
          </el-form>
          <el-form
            class="convention"
            ref="ruleForm16"
            :model="form"
            label-width="1.4583rem"
            :rules="rules"
          >
            <el-form-item label="近1个月征信查询机构数" prop="p" key="cut16">
              <el-input v-model="form.p" @blur="p"></el-input>
              <p
                style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 0.0833rem"
              >
                次
              </p>
            </el-form-item>
          </el-form>
        </li>
      </ul>
      <!-- 服务协议 -->
      <div class="agreement">
        <img
          @click="
            submitBtn(
              'ruleForm1',
              'ruleForm2',
              'ruleForm3',
              'ruleForm4',
              'ruleForm5',
              'ruleForm6',
              'ruleForm7',
              'ruleForm8',
              'ruleForm9',
              'ruleForm10',
              'ruleForm11',
              'ruleForm12',
              'ruleForm13',
              'ruleForm14',
              'ruleForm15',
              'ruleForm16'
            )
          "
          :src="require(`@/assets/shangpiao/组${radio ? '38' : '39'}.png`)"
          alt=""
        />
        <span> 阅读并同意 </span>
        <a
          @click="
            submitBtn(
              'ruleForm1',
              'ruleForm2',
              'ruleForm3',
              'ruleForm4',
              'ruleForm5',
              'ruleForm6',
              'ruleForm7',
              'ruleForm8',
              'ruleForm9',
              'ruleForm10',
              'ruleForm11',
              'ruleForm12',
              'ruleForm13',
              'ruleForm14',
              'ruleForm15',
              'ruleForm16'
            )
          "
          >《企业授权协议》、</a
        >
        <a
          @click="
            submitBtn(
              'ruleForm1',
              'ruleForm2',
              'ruleForm3',
              'ruleForm4',
              'ruleForm5',
              'ruleForm6',
              'ruleForm7',
              'ruleForm8',
              'ruleForm9',
              'ruleForm10',
              'ruleForm11',
              'ruleForm12',
              'ruleForm13',
              'ruleForm14',
              'ruleForm15',
              'ruleForm16'
            )
          "
          >《技术服务协议》</a
        >
      </div>
      <div class="submit">
        <el-tooltip placement="top" v-if="!btn">
          <div slot="content">请勾选授权协议<br />确认填写的信息是否完整</div>
          <button
            class="btn btn3"
            v-bind:class="{
              active: btn & radio,
              actives: submitMessage == '提交中'
            }"
            @click="addKJApplys()"
          >
            {{ submitMessage }}
          </button>
        </el-tooltip>
        <button
          v-else
          class="btn btn3"
          v-bind:class="{
            active: btn & radio,
            actives: submitMessage == '提交中'
          }"
          @click="addKJApplys()"
        >
          {{ submitMessage }}
        </button>
      </div>
    </div>
    <!-- 弹窗 -->
    <!--签署协议弹窗开始 -->
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title=""
      :visible.sync="showAgreementVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center" v-loading="loading">
        <template>
          <el-tabs v-model="activeName">
            <el-tab-pane
              v-for="(item, index) in list"
              :key="index"
              :label="item.name"
              :name="item.names"
            >
              <div class="first">
                <iframe
                  style="border: none"
                  width="100%"
                  height="100%"
                  v-bind:src="item.url"
                ></iframe>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button
          v-if="contractStatuss"
          :disabled="isLock"
          class="dialog-footer-bnt btn2"
          @click="aaaa"
        >
          确定
        </button>
        <button v-else :disabled="isLock" class="dialog-footer-bnt btn2" @click="sign">
          去签署
        </button>
      </div>
    </el-dialog>
    <!-- 签署协议弹窗结束 -->
    <!--签署协议提示开始 -->
    <el-dialog
      class="hint"
      :closeOnClickModal="false"
      title="合同签署"
      :visible.sync="hintVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center-hint">
        <p>
          签署短信已发送至经办人手机{{ operatetel | getPhone }}、法定代表人手机{{
            officertel | getPhone
          }}，请点击短信签署链接完成签署操作。
        </p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button
          style="background: #fff; color: #3f6ef2"
          class="dialog-footer-bnt btn2"
          @click="aaaa"
        >
          确定
        </button>
        <button
          v-bind:class="{ actives: submitMessage == '提交中' }"
          class="dialog-footer-bnt btn2"
          @click="addKJApplys()"
        >
          提交
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { myPostFetch, Contracts, Contract, createContractReview, updateapplyid } from '@/utils'
export default {
  data() {
    return {
      contractStatuss: true, //合同签署状态
      isLock: false,
      activeName: 'first', //标签页默认
      showAgreementVisible: false, //协议弹框:
      hintVisible: false,
      officertel: '', //法人手机号
      operatetel: '', //经办人手机号
      loading: false,
      list: null,
      submitMessage: '提交',
      radio: false, //企业授权服务状态变量
      btn: false, //提交按钮是否可用状态变量
      procedureId: '', // 从路由地址中获取产品ID,保存到状态变量中
      flowId: '',
      productcode: null,
      productname: null,
      ProductList: null,
      form: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: '',
        g: '',
        h: '',
        i: '',
        j: '',
        k: '',
        l: '',
        m: '',
        n: '',
        o: '',
        p: ''
      },
      // 用户填写资料表格
      addform: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: '',
        g: '',
        h: '',
        i: '',
        j: '',
        k: '',
        l: '',
        m: '',
        n: '',
        o: '',
        p: ''
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: ' ', trigger: 'blur' }],
        b: [{ required: true, message: ' ', trigger: 'blur' }],
        c: [{ required: true, message: ' ', trigger: 'blur' }],
        d: [{ required: true, message: ' ', trigger: 'blur' }],
        e: [{ required: true, message: ' ', trigger: 'blur' }],
        f: [{ required: true, message: ' ', trigger: 'blur' }],
        g: [{ required: true, message: ' ', trigger: 'blur' }],
        h: [{ required: true, message: ' ', trigger: 'blur' }],
        i: [{ required: true, message: ' ', trigger: 'blur' }],
        j: [{ required: true, message: ' ', trigger: 'blur' }],
        k: [{ required: true, message: ' ', trigger: 'blur' }],
        l: [{ required: true, message: ' ', trigger: 'blur' }],
        m: [{ required: true, message: ' ', trigger: 'blur' }],
        n: [{ required: true, message: ' ', trigger: 'blur' }],
        o: [{ required: true, message: ' ', trigger: 'blur' }],
        p: [{ required: true, message: ' ', trigger: 'blur' }]
      },
      // 合同签署数据
      contract: {
        applyid: '',
        entname: '',
        FRaccountid: '',
        inputdate: '',
        JBRaccountid: '',
        licenseno: '',
        mainindname: '',
        officer: '',
        officertel: '',
        ORGaccountid: '',
        productcode: '',
        radio: '',
        ticketadder: '',
        ticketbank: '',
        ticketbankno: '',
        tickethead: '',
        ticketno: '',
        tickettel: '',
        acceptor: '', //承兑人
        step: 'apply'
      }
    }
  },
  // 生命周期方法
  mounted() {
    // 从路由地址中获取产品ID, 保存到状态变量中;
    this.procedureId = localStorage.getItem('id')
    this.productcode = localStorage.getItem('productcode')
    this.productname = localStorage.getItem('productname')
    this.contract.productcode = localStorage.getItem('productcode')
  },
  // 过滤器
  filters: {
    // 手机号脱敏
    getPhone: function (value) {
      if (!value) return value
      value = value.replace(/(\d{3})\d*(\d{4})/, '$1****$2')
      return value
    }
  },
  methods: {
    // ------------------------签署合同开始------------------------
    // 点击去签署按钮
    async sign() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 500)
      this.loading = true
      let data = await Contract(this.contract)
      if (data.code == 100) {
        this.loading = false
        this.radio = true
        this.showAgreementVisible = false
        this.hintVisible = true
        this.flowId = data.data.flowId
        // localStorage.setItem("flowId", this.flowId);
        this.submitBtns()
      }
    },
    // 签署协议提示确认键
    aaaa() {
      this.radio = true
      this.showAgreementVisible = false
      this.submitBtns()
      this.hintVisible = false
    },
    // 点击勾选协议按钮
    async submitBtn(
      ruleForm1,
      ruleForm2,
      ruleForm3,
      ruleForm4,
      ruleForm5,
      ruleForm6,
      ruleForm7,
      ruleForm8,
      ruleForm9,
      ruleForm10,
      ruleForm11,
      ruleForm12,
      ruleForm13,
      ruleForm14,
      ruleForm15,
      ruleForm16
    ) {
      let { a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p } = this.form
      if (this.radio) return
      if (
        a == '' ||
        b == '' ||
        c == '' ||
        d == '' ||
        e == '' ||
        f == '' ||
        m == '' ||
        n == '' ||
        o == '' ||
        p == ''
      ) {
        this.$refs[ruleForm1].validate(valid => {})
        this.$refs[ruleForm2].validate(valid => {})
        this.$refs[ruleForm3].validate(valid => {})
        this.$refs[ruleForm4].validate(valid => {})
        this.$refs[ruleForm5].validate(valid => {})
        this.$refs[ruleForm6].validate(valid => {})
        this.$refs[ruleForm13].validate(valid => {})
        this.$refs[ruleForm14].validate(valid => {})
        this.$refs[ruleForm15].validate(valid => {})
        this.$refs[ruleForm16].validate(valid => {})
      }

      if ((e == '企业存在' || e == '法定代表人及企业存在') && g == '') {
        this.$refs[ruleForm7].validate(valid => {})
      }
      if ((e == '企业存在' || e == '法定代表人及企业存在') && h == '') {
        this.$refs[ruleForm8].validate(valid => {})
      }
      if ((e == '企业存在' || e == '法定代表人及企业存在') && i == '') {
        this.$refs[ruleForm9].validate(valid => {})
      }
      if ((e == '法定代表人存在' || e == '法定代表人及企业存在') && j == '') {
        this.$refs[ruleForm10].validate(valid => {})
      }
      if ((e == '法定代表人存在' || e == '法定代表人及企业存在') && k == '') {
        this.$refs[ruleForm11].validate(valid => {})
      }
      if ((e == '法定代表人存在' || e == '法定代表人及企业存在') && l == '') {
        this.$refs[ruleForm12].validate(valid => {})
      }
      if (
        a == '' ||
        b == '' ||
        c == '' ||
        d == '' ||
        e == '' ||
        (e == '企业存在' && (g == '' || h == '' || i == '')) ||
        (e == '法定代表人存在' && (j == '' || k == '' || l == '')) ||
        (e == '法定代表人及企业存在' &&
          (g == '' || h == '' || i == '' || j == '' || k == '' || l == '')) ||
        f == '' ||
        m == '' ||
        n == '' ||
        o == '' ||
        p == ''
      ) {
        this.$Message.error('请填写信息')
        return
      }
      this.getAgreement()
    },
    //获取协议
    async getAgreement() {
      let productcode = this.contract.productcode
      let parameter = {
        productcode: productcode,
        entname: sessionStorage.getItem('entname')
      }
      this.loading = true
      this.showAgreementVisible = true
      let data = await Contracts(parameter)
      if (data.code == 10000) {
        this.$Message.error('登录已过期，请重新登录')
        this.$router.push('/login')
        sessionStorage.clear()
        return
      }
      if (data.code != 100) {
        this.showAgreementVisible = false
        this.$Message.error('系统异常，请您稍后再试')
        this.loading = false
        return
      }
      this.officertel = data.data.ent.fincerttel
      this.operatetel = data.data.ent.operateTel
      this.contract.entname = data.data.ent.entname
      this.contract.FRaccountid = data.data.ent.fraccountid
      this.contract.inputdate = data.data.ent.inputdate
      this.contract.JBRaccountid = data.data.ent.jbRaccountid
      this.contract.licenseno = data.data.ent.licenseno
      this.contract.mainindname = data.data.ent.mainindname
      this.contract.officer = data.data.ent.operatename
      this.contract.officertel = data.data.ent.fincerttel
      this.contract.ORGaccountid = data.data.ent.qyaccountid
      data.data.coopeorg
        ? (this.contract.ticketbank = data.data.coopeorg.ticketbank)
        : (this.contract.ticketbank = '')
      data.data.coopeorg
        ? (this.contract.ticketbankno = data.data.coopeorg.ticketaccountno)
        : (this.contract.ticketbankno = '')
      data.data.coopeorg
        ? (this.contract.tickettel = data.data.coopeorg.tickettel)
        : (this.contract.tickettel = '')
      this.contract.radio = data.data.radio
      let GetcreateContractReview = await createContractReview(this.contract)
      if (GetcreateContractReview.code == 100) {
        this.contractStatuss = GetcreateContractReview.data.statuss
        if (this.contractStatuss) {
          this.list = GetcreateContractReview.data.data
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == '企业授权协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'first'
            } else if (this.list[i].name == '技术服务协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'second'
            }
          }
          this.loading = false
        } else {
          this.list = GetcreateContractReview.data.data.file
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == '企业授权协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'first'
            } else if (this.list[i].name == '技术服务协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'second'
            }
          }
          this.loading = false
        }
      } else {
        this.showAgreementVisible = false
        this.$Message.error('系统异常，请您稍后再试')
      }
      this.submitBtns()
    },

    // ------------------------签署合同结束------------------------

    // 表单
    a(e) {
      if (e != '') {
        this.$refs['ruleForm1'].clearValidate()
      }
      this.submitBtns()
    },
    b(e) {
      this.form.b = this.addform.b
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.b = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.addform.b = this.fmoney(this.addform.b)
      let value = Number(this.form.b)
      this.submitBtns()
      if (this.form.b == '') return
      this.form.b = value.toFixed(2)
      if (isNaN(this.form.b)) {
        this.form.b = ''
      }
    },

    c(e) {
      this.form.c = this.addform.c
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.c = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.addform.c = this.fmoney(this.addform.c)
      let value = Number(this.form.c)
      this.submitBtns()
      if (this.form.c == '') return
      this.form.c = value.toFixed(2)
      if (isNaN(this.form.c)) {
        this.form.c = ''
      }
    },
    d(e) {
      this.form.d = this.addform.d
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.d = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.addform.d = this.fmoney(this.addform.d)
      let value = Number(this.form.d)
      this.submitBtns()
      if (this.form.d == '') return
      this.form.d = value.toFixed(2)
      if (isNaN(this.form.d)) {
        this.form.d = ''
      }
    },
    e(e) {
      if (e != '') {
        this.$refs['ruleForm5'].clearValidate()
      }
      this.submitBtns()
    },

    f(e) {
      this.form.f = this.addform.f
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.f = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.addform.f = this.fmoney(this.addform.f)
      let value = Number(this.form.f)
      this.submitBtns()
      if (this.addform.f == '') return
      this.form.f = value.toFixed(2)
      if (isNaN(this.form.f)) {
        this.addform.f = ''
      }
    },
    g(e) {
      if (e != '') {
        this.$refs['ruleForm7'].clearValidate()
      }
      this.submitBtns()
    },
    // 限制输入数字
    h(e) {
      if (e.target.value != '') {
        let num = Number(e.target.value)
        if (isNaN(num)) return (this.form.h = '')
        this.$refs['ruleForm8'].clearValidate()
      }
      this.submitBtns()
    },
    // 限制输入数字
    i(e) {
      if (e.target.value != '') {
        let num = Number(e.target.value)
        if (isNaN(num)) return (this.form.i = '')
        this.$refs['ruleForm9'].clearValidate()
      }
      this.submitBtns()
    },

    j(e) {
      if (e != '') {
        this.$refs['ruleForm10'].clearValidate()
      }
      this.submitBtns()
    },

    // 限制输入数字
    k(e) {
      if (e.target.value != '') {
        let num = Number(e.target.value)
        if (isNaN(num)) return (this.form.k = '')
        this.$refs['ruleForm11'].clearValidate()
      }
      this.submitBtns()
    },
    // 限制输入数字
    l(e) {
      if (e.target.value != '') {
        let num = Number(e.target.value)
        if (isNaN(num)) return (this.form.l = '')
        this.$refs['ruleForm12'].clearValidate()
      }
      this.submitBtns()
    },
    m(e) {
      if (e != '') {
        this.$refs['ruleForm13'].clearValidate()
      }
      this.submitBtns()
    },

    // 限制输入数字
    n(e) {
      if (e.target.value != '') {
        let num = Number(e.target.value)
        if (isNaN(num)) return (this.form.n = '')
        this.$refs['ruleForm14'].clearValidate()
      }
      this.submitBtns()
    },

    // 限制输入数字
    o(e) {
      if (e.target.value != '') {
        let num = Number(e.target.value)
        if (isNaN(num)) return (this.form.o = '')
        this.$refs['ruleForm15'].clearValidate()
      }
      this.submitBtns()
    },
    // 限制输入数字
    p(e) {
      if (e.target.value != '') {
        let num = Number(e.target.value)
        if (isNaN(num)) return (this.form.p = '')
        this.$refs['ruleForm16'].clearValidate()
      }
      this.submitBtns()
    },
    // 产品申请第1步
    async addKJApplys() {
      if (this.submitMessage == '提交中') return
      this.hintVisible = false
      if (!this.btn) return
      let { a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p } = this.form
      this.submitMessage = '提交中'
      let url = '/api/PHYApply/addCYPHD'
      let params = {
        creditrating: a,
        taxablesales: b,
        taxamount: c,
        entinvoicemoney: d,
        entfrloansoverdue: e,
        entfroverdue: f,
        entoverdue24: e == '企业存在' || e == '法定代表人及企业存在' ? g : '',
        entoverdue6: e == '企业存在' || e == '法定代表人及企业存在' ? h : '',
        entoverdue12: e == '企业存在' || e == '法定代表人及企业存在' ? i : '',
        froverdue24: e == '法定代表人存在' || e == '法定代表人及企业存在' ? j : '',
        froverdue6: e == '法定代表人存在' || e == '法定代表人及企业存在' ? k : '',
        froverdue12: e == '法定代表人存在' || e == '法定代表人及企业存在' ? l : '',
        entfrloss: m,
        entcredittime3: n,
        entcredittime1: o,
        organization: p,
        productname: this.productname,
        productid: this.procedureId,
        productcode: this.productcode
      }
      let data = await myPostFetch(url, params)
      if (data.msg != 'ok') {
        this.$Message.error('提交失败，请检查申请信息')
        this.submitMessage = '提交'
        return
      }
      await updateapplyid(data.data.id, this.flowId)
      if (data.msg == 'ok') {
        this.$router.push('/cyedApplication3')
        setTimeout(() => {
          this.$router.go(0)
        }, 500)
        setTimeout(() => {
          this.submitMessage = '提交'
        }, 3000)
      } else {
        this.$Message.error('申请提交失败，请检查数据')
        this.submitMessage = '提交'
      }
    },
    // ------------------------------------------------------
    // 表单格式转换
    // 票面金额
    limitInput(value, name) {
      this.addform[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ''
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == '' || s == null || (s == undefined) | isNaN(Number(s))) {
        return s
      }
      s = Number(s) ? Number(s) : s
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2
      s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
      var l = s.split('.')[0].split('').reverse()
      var r = s.split('.')[1]
      var t = ''
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? ',' : '')
      }
      if (n > 0) {
        r = '.' + r
      } else if (n == 0) {
        r = ''
      }
      let returnT = t.split('').reverse().join('') + r
      //负数处理
      if (returnT[0] == '-' && returnT[1] == ',') {
        returnT = '-' + returnT.substring(2)
      }
      return returnT
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = ''
      if (s) {
        str = String(s).replace(/,/g, '')
      }
      if (s && (s + '').indexOf('.') > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, '')
      } else if (s && Number(str)) {
        return str
      } else {
        return s
      }
    },
    submitBtns() {
      let { a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p } = this.form
      if (
        a == '' ||
        b == '' ||
        c == '' ||
        d == '' ||
        e == '' ||
        (e == '企业存在' && (g == '' || h == '' || i == '')) ||
        (e == '法定代表人存在' && (j == '' || k == '' || l == '')) ||
        (e == '法定代表人及企业存在' &&
          (g == '' || h == '' || i == '' || j == '' || k == '' || l == '')) ||
        f == '' ||
        m == '' ||
        n == '' ||
        o == '' ||
        p == '' ||
        !this.radio
      ) {
        this.btn = false
      } else {
        this.btn = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boxs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  .f1 {
    margin-top: 0.1042rem;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 0.2083rem;
        .icon {
          .icon1 {
            width: 0.2083rem;
          }
          .icon2 {
            height: 0.0156rem;
            margin: 0 0.0417rem;
          }
        }
        span {
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          margin-left: -0.099rem;
          margin-top: 0.0156rem;
        }
      }
    }
  }
  .unit {
    position: relative;
    width: 90%;
    height: 0.1042rem;
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #b3b3b3;
    font-size: 0.0729rem;
    color: #606266;
    p {
      position: absolute;
      @media only screen and (min-width: 1580px) and (max-width: 1950px) {
        right: 15.1%;
      }
      right: 5.5%;
      top: -0.0156rem;
    }
  }
  .f2 {
    margin-top: 5%;
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;

      li {
        position: relative;
        width: 90%;
        margin-bottom: 18px;
        height: 0.2604rem;
        display: flex;
        justify-content: center;
        .message {
          margin-top: -0.0573rem;
          font-size: 0.0625rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ef2d46;
        }
      }
    }
    .special {
      margin-bottom: 0.0781rem;
      position: relative;
      box-sizing: border-box;
      padding-top: 0.2604rem;
      display: flex;
      background-color: rgb(243, 249, 254);
      height: 0.625rem;
      @media only screen and (min-width: 1000px) and (max-width: 1090px) {
        margin-left: 17vw;
        width: 680px;
      }
      @media only screen and (min-width: 1090px) and (max-width: 1150px) {
        margin-left: 18vw;
        width: 680px;
      }
      @media only screen and (min-width: 1150px) and (max-width: 1250px) {
        margin-left: 15.5vw;
        width: 760px;
      }
      @media only screen and (min-width: 1250px) and (max-width: 1300px) {
        margin-left: 15.5vw;

        width: 810px;
      }
      @media only screen and (min-width: 1300px) and (max-width: 1390px) {
        margin-left: 16vw;
        width: 810px;
      }
      @media only screen and (min-width: 1390px) and (max-width: 1475px) {
        margin-left: 18vw;
        width: 850px;
      }
      @media only screen and (min-width: 1475px) and (max-width: 1575px) {
        margin-left: 19vw;
        width: 860px;
      }
      @media only screen and (min-width: 1575px) and (max-width: 1675px) {
        margin-left: 17vw;
        width: 920px;
      }
      @media only screen and (min-width: 1675px) and (max-width: 1775px) {
        margin-left: 18vw;
        width: 920px;
      }
      @media only screen and (min-width: 1775px) and (max-width: 1875px) {
        margin-left: 19vw;
        width: 980px;
      }
      @media only screen and (min-width: 1875px) and (max-width: 2580px) {
        margin-left: 20vw;
        width: 980px;
      }
      .special_div {
        box-sizing: border-box;
        padding-right: 0.0521rem;
        width: 100%;
        display: flex;
        justify-content: space-around;
      }
    }
    h6 {
      position: absolute;
      top: 0.0521rem;
      left: 0.1042rem;
      color: #1f1f20;
      font-size: 0.0833rem;
    }
  }
  .f2::-webkit-scrollbar {
    width: 0.026rem;
    height: 0.0521rem;
    background-color: #fff;
  }

  .f2::-webkit-scrollbar-thumb {
    border-radius: 0.0104rem;
    background: rgba(36, 143, 172, 0.5);
  }
  .f3 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0.2865rem;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      bottom: 0.3646rem;
    }
    width: 1.4323rem;
    height: 0.1771rem;
    background: #3f6ef2;
    border-radius: 0.0208rem;
    font-size: 0.0938rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
  }
  // 服务协议
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.1302rem;
    text-align: center;
    margin-top: 0.0521rem;
    user-select: none;
    span {
      font-size: 0.0729rem;
      color: #666;
      margin-left: 0.0365rem;
    }
    img {
      width: 0.0781rem;
      height: 0.0781rem;
      cursor: pointer;
    }
    a {
      cursor: pointer;
      font-size: 0.0729rem;
      color: #738bd0;
    }
  }
  // 按钮组
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.2604rem;
    margin: 0.026rem 0 0.026rem 0;

    .btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.9375rem;
      height: 0.1771rem;
      background: #738bd0;
      border-radius: 0.0208rem;
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 0.1563rem;
    }
    .btn1 {
      background-color: #bfbfbf;
    }
    // 提交按钮
    .btn3 {
      background-color: #ccc;
      &.active {
        background-color: #3f6ef2;
      }
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
  }
  .special_top {
    position: absolute;
    @media only screen and (min-width: 0px) and (max-width: 1024px) {
      left: -1.52rem;
    }
    @media only screen and (min-width: 1025px) and (max-width: 1079px) {
      left: -1.5rem;
    }
    @media only screen and (min-width: 1080px) and (max-width: 1167px) {
      left: -1.4rem;
    }
    @media only screen and (min-width: 1168px) and (max-width: 1234px) {
      left: -1.28rem;
    }
    @media only screen and (min-width: 1235px) and (max-width: 1299px) {
      left: -1.21rem;
    }
    @media only screen and (min-width: 1300px) and (max-width: 1420px) {
      left: -1.15rem;
    }
    @media only screen and (min-width: 1420px) and (max-width: 2580px) {
      left: -1.1rem;
    }
    top: -0.0469rem;
    font-size: 0.0885rem;
    color: #1f1f20;
  }
  .special_bottom {
    position: absolute;
    @media only screen and (min-width: 0px) and (max-width: 1024px) {
      left: -1.435rem;
      top: 0.0938rem;
    }
    @media only screen and (min-width: 1025px) and (max-width: 1079px) {
      left: -1.41rem;
      top: 0.0938rem;
    }
    @media only screen and (min-width: 1080px) and (max-width: 1167px) {
      left: -1.32rem;
      top: 0.0938rem;
    }
    @media only screen and (min-width: 1168px) and (max-width: 1234px) {
      left: -1.21rem;
    }
    @media only screen and (min-width: 1235px) and (max-width: 1299px) {
      left: -1.1517rem;
    }
    @media only screen and (min-width: 1300px) and (max-width: 1420px) {
      left: -1.0917rem;
    }
    @media only screen and (min-width: 1420px) and (max-width: 2580px) {
      left: -1.0417rem;
    }

    top: 0.0625rem;
    font-size: 0.0885rem;
    color: #1f1f20;
  }
  // 弹出框
  .dialog-center {
    box-sizing: border-box;
    padding: 0 0.026rem;
    display: flex;
    justify-content: center;
    width: 100%;
    // 小屏
    @media only screen and (min-width: 900px) and (max-width: 1535px) {
      height: 3.05rem;
    }
    // 中屏
    @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      height: 2.8rem;
    }
    // 大屏
    @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      height: 3.4375rem;
    }
    .first {
      display: flex;
      justify-content: center;
      align-items: center;
      // 小屏
      @media only screen and (min-width: 900px) and (max-width: 1535px) {
        min-width: 3.125rem;
        height: 2.3958rem;
      }
      // 中屏
      @media only screen and (min-width: 1536px) and (max-width: 1919px) {
        width: 3.125rem;
        height: 2.3958rem;
      }
      // 大屏
      @media only screen and (min-width: 1920px) and (max-width: 2580px) {
        width: 3.9583rem;
        height: 3.0208rem;
      }

      background-color: #fff;

      h1 {
        font-size: 0.0938rem;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 0.6302rem;
      height: 0.1615rem;
      color: #3f6ef2;
      border: 0.0052rem solid #3f6ef2;
      border-radius: 0.0208rem;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
        border: 0px;
      }
    }
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
  .dialog-center-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.1042rem;
    font-size: 0.0885rem;
  }
}
::v-deep .hint .el-dialog {
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 52%;
  }
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 50%;
  }
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 49%;
  }
}
::v-deep .hint .el-dialog__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.026rem 0.1042rem;
}
// 协议
::v-deep .inviteAffirmClient .el-dialog {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 45%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 45%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 50%;
    // background-color: #f00;
  }
}
::v-deep .el-dialog__header {
  border: 0;
  padding: 0.026rem 0.1042rem;
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 300px;
  @media only screen and (min-width: 1px) and (max-width: 910px) {
    width: 100px;
  }
  @media only screen and (min-width: 911px) and (max-width: 999px) {
    width: 150px;
  }
  @media only screen and (min-width: 1000px) and (max-width: 1150px) {
    width: 200px;
  }
  @media only screen and (min-width: 1151px) and (max-width: 1550px) {
    width: 250px;
  }
  height: 39px;
  font-size: 14px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep .el-form-item__label {
  font-size: 0.0885rem;
  font-weight: 400;
  color: #1f1f20;
}
::v-deep .el-form-item {
  margin-bottom: 0px;
}
::v-deep .specials .el-input__inner {
  width: 120px;
  height: 0.2031rem;
  font-size: 0.0781rem;
  @media only screen and (min-width: 1000px) and (max-width: 1200px) {
    width: 90px;
  }
}
::v-deep .popover .el-form-item__label {
  padding: 0 0.1823rem 0 0;
}
::v-deep .popover .el-form-item__content {
  font-size: 0.0729rem;
  margin-top: 0px;
}

::v-deep .convention .el-form-item__label {
  @media only screen and (min-width: 1000px) and (max-width: 1090px) {
    width: 280px !important;
  }
  @media only screen and (min-width: 1090px) and (max-width: 1150px) {
    width: 280px !important;
  }
  @media only screen and (min-width: 1150px) and (max-width: 1250px) {
    width: 260px !important;
  }
  @media only screen and (min-width: 1250px) and (max-width: 1300px) {
    width: 310px !important;
  }
  @media only screen and (min-width: 1300px) and (max-width: 1390px) {
    width: 310px !important;
  }
  @media only screen and (min-width: 1390px) and (max-width: 1475px) {
    width: 350px !important;
  }
  @media only screen and (min-width: 1475px) and (max-width: 1575px) {
    width: 350px !important;
  }
  @media only screen and (min-width: 1575px) and (max-width: 1675px) {
    width: 310px !important;
  }
  @media only screen and (min-width: 1675px) and (max-width: 1775px) {
    width: 310px !important;
  }
  @media only screen and (min-width: 1775px) and (max-width: 1875px) {
    width: 380px !important;
  }
  @media only screen and (min-width: 1875px) and (max-width: 2580px) {
    width: 380px !important;
  }
}
::v-deep .convention .el-form-item__content {
  @media only screen and (min-width: 1000px) and (max-width: 1090px) {
    margin-left: 280px !important;
  }
  @media only screen and (min-width: 1090px) and (max-width: 1150px) {
    margin-left: 280px !important;
  }
  @media only screen and (min-width: 1150px) and (max-width: 1250px) {
    margin-left: 260px !important;
  }
  @media only screen and (min-width: 1250px) and (max-width: 1300px) {
    margin-left: 310px !important;
  }
  @media only screen and (min-width: 1300px) and (max-width: 1390px) {
    margin-left: 310px !important;
  }
  @media only screen and (min-width: 1390px) and (max-width: 1475px) {
    margin-left: 350px !important;
  }
  @media only screen and (min-width: 1475px) and (max-width: 1575px) {
    margin-left: 350px !important;
  }
  @media only screen and (min-width: 1575px) and (max-width: 1675px) {
    margin-left: 310px !important;
  }
  @media only screen and (min-width: 1675px) and (max-width: 1775px) {
    margin-left: 310px !important;
  }
  @media only screen and (min-width: 1775px) and (max-width: 1875px) {
    margin-left: 380px !important;
  }
  @media only screen and (min-width: 1875px) and (max-width: 2580px) {
    margin-left: 380px !important;
  }
}
</style>
<style lang="scss"></style>
